<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>event</title>
</head>
<body>
<div id="parent">
  <p id="child">
    事件执行顺序
  </p>
</div>
<script>
  document.addEventListener('click',dispatchEvent);
  function dispatchEvent(event,isCapture){
    let paths = [];
    let current = event.target;
    while(current){
      paths.push(current);
      current=current.parentNode;
    }
    for(let i=paths.length-1;i>=0;i--){
      let eventHandler = paths[i].onClickCapture;
      eventHandler&&eventHandler()
    }
    for(let i=0;i<paths.length;i++){
      let eventHandler = paths[i].onClick;
      eventHandler&&eventHandler()
    }
  }
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');
  parent.addEventListener("click", () => {
    console.log("父元素原生捕获");
  },true);
  parent.addEventListener("click", () => {
    console.log("父元素原生冒泡");
  });
  child.addEventListener("click", () => {
    console.log("子元素原生捕获");
  },true);
  child.addEventListener("click", () => {
    console.log("子元素原生冒泡");
  });
  document.addEventListener('click',()=>{
    console.log("document捕获");
  },true);
  document.addEventListener('click',()=>{
    console.log("document冒泡");
  });
  parent.onClick=() => {
    console.log("父元素React事件冒泡");
  }
  parent.onClickCapture=() => {
    console.log("父元素React事件捕获");
  }
  child.onClick=() => {
    console.log("子元素React事件冒泡");
  }
  child.onClickCapture=() => {
    console.log("子元素React事件捕获");
  }
  /*
 document捕获
 父元素原生捕获
 子元素原生捕获
 子元素原生冒泡
 父元素原生冒泡
 父元素React事件捕获
 子元素React事件捕获
 子元素React事件冒泡
 父元素React事件冒泡
 document冒泡
  */
</script>
</body>
</html>
